// 该文件用于创建整个应用的路由器
import VueRouter from "vue-router";
// 引入组件
import AboutVue from "../pages/AboutVue.vue";
import HomeVue from "../pages/HomeVue.vue";
import NewsVue from "../pages/NewsVue.vue";
import MessageVue from "../pages/MessageVue.vue";
import DetailVue from "../pages/DetailVue.vue";

// 创建并暴露一个路由器
const router = new VueRouter({
  routes: [
    // 一级路由
    {
      name: "guanyu",
      path: "/about",
      component: AboutVue,
      meta: {
        // 是否需要权限校验
        isAuth: true,
        title: "关于",
      },
    },
    {
      name: "zhuye",
      path: "/home",
      component: HomeVue,
      meta: {
        isAuth: false,
        title: "主页",
      },
      children: [
        {
          name: "xinwen",
          path: "news",
          component: NewsVue,
          meta: {
            isAuth: false,
            title: "新闻",
          },
          // 独享守卫，只有前置，没有后置
          // beforeEnter: (to, from, next) => {
          //   console.log(from);
          //   if (to.meta.isAuth) {
          //     if (localStorage.getItem("school") === "石大") {
          //       next();
          //     } else {
          //       alert("学校名字不对");
          //     }
          //   } else {
          //     next();
          //   }
          // },
        },
        {
          name: "xiaoxi",
          path: "message",
          component: MessageVue,
          meta: {
            isAuth: false,
            title: "消息",
          },
          children: [
            {
              name: "xiangqing",
              path: "detail",
              component: DetailVue,

              // props第一种写法————对象
              // 该对象所有key-value都会以props形式传给DetailVue组件
              // props:{a:1,b:'helloworld'}

              // props第二种写法————布尔值
              // 若为真，该路由组件收到所有params参数，以props形式传给DetailVue组件
              // props: true,

              // props第三种写法————函数
              // 需要设置query传参
              props($route) {
                return { id: $route.query.id, title: $route.query.title };
              },
              // 或者解构赋值
              // props({ query }) {
              //   return { id: query.id, title: query.title };
              // },
              // },
            },
          ],
        },
      ],
    },
  ],
});

// 全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
// router.beforeEach((to, from, next) => {
// if (to.path === "/home/news" || to.path === "/home/message") {
// 是否需要权限校验
//   if (to.meta.isAuth) {
//     if (localStorage.getItem("school") === "石大") {
//       next();
//     } else {
//       alert("学校名字不对");
//     }
//   } else {
//     next();
//   }
// });

// 全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
// router.afterEach((to, from) => {
//   console.log(to, from);
//   document.title = to.meta.title || "自定义系统";
// });

export default router;
